Saltar al contenido principal
Version: Current

Setting group - Banner background - With colors

The Banner background setting group allows you to customize the visual appearance of banners across your site. These settings include options for colors, gradients, images, and videos, providing flexibility in how banners are presented. While these settings are applied globally, they can be overridden at the section or block level for more specific customization.

Key components include the ability to choose solid colors or gradients for backgrounds, apply overlays with adjustable opacity, and select how background images fit within banners. You can also personalize banners with specific images or videos, and choose different assets for mobile devices to ensure optimal display.

Usage examples include creating a cohesive theme by using consistent colors and overlays, highlighting promotions with gradient overlays, and ensuring responsive design by utilizing mobile-specific settings. These settings provide a robust framework for customizing the appearance of banners, allowing for both consistency and creativity in design.

Overview​

The Banner background setting group is designed to control the visual appearance of banners across your site. These settings allow you to customize elements such as colors, gradients, images, and videos, providing flexibility in how banners are presented. While these settings are applied globally, they can be overridden at the section or block level for more specific customization.

Key components and functionality​

The Banner background settings offer a range of options to enhance the visual appeal of your site's banners. This includes settings for colors, gradients, images, and videos, allowing for a cohesive and dynamic presentation.

Background color​

This setting allows you to choose a solid color for the banner background, helping to establish a consistent theme color across your banners.

Background gradient​

Select a gradient to be used as the banner background. This option provides a more dynamic and visually appealing background compared to a solid color.

Overlay color​

The overlay color setting lets you apply a color overlay on top of the banner background. This can be useful for enhancing text readability or creating a specific visual effect.

Overlay gradient​

Similar to the overlay color, this setting allows you to apply a gradient overlay on the banner background, adding depth and interest to the design.

Overlay opacity​

This setting controls the transparency of the overlay applied to the banner background. It ranges from 0% to 100%, with a default value of 48%. Adjusting the opacity can help balance the visibility of the background and overlay.

Background image fit​

Choose how the background image should fit within the banner. Options include:

  1. Contain: Ensures the entire image is visible within the banner.
  2. Cover: The image covers the entire banner area, potentially cropping parts of the image.
  3. Default: Uses the default fit setting.
    • The default option is cover.

Background image​

Select an image to be used as the banner background. This setting allows you to personalize banners with specific imagery.

Background image mobile​

Choose a different image for mobile devices to ensure optimal display on smaller screens. This setting helps maintain a responsive design by allowing different assets or aspect ratios for mobile contexts.

Background video​

Add a video to be used as the banner background. This can create a dynamic and engaging visual experience for visitors.

Background video mobile​

Select a different video for mobile devices to ensure compatibility and performance on smaller screens. This setting allows for adjustments in video content or aspect ratio to suit mobile viewing.

Usage examples​

  1. Creating a cohesive theme: You might consider using the background color and overlay settings to establish a consistent color scheme across all banners, enhancing brand recognition.

  2. Highlighting promotions: Consider applying a gradient overlay with reduced opacity to draw attention to promotional banners without obscuring the background image.

  3. Responsive design: Utilize the mobile-specific image and video settings to ensure banners look great on all devices, providing a seamless user experience.

These settings provide a robust framework for customizing the appearance of banners across your site, allowing for both consistency and creativity in design.